<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <base href="<%=basePath%>"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="renderer" content="webkit">
    <title></title>
    <link rel="stylesheet" href="<%=basePath%>resource/css/pintuer.css">
    <link rel="stylesheet" href="<%=basePath%>resource/css/admin.css">
    <script src="<%=basePath%>resource/js/jquery.js"></script>
    <script src="<%=basePath%>resource/js/pintuer.js"></script>
    <style>
        .form-group {
            width: 80%;
        }

        /*.leftnav {*/
        /*    position: absolute !important;*/
        /*    right: 100px !important;*/
        /*    top: 100px !important;*/
        /*}*/
        #userDiv {
            width: 180px;
            height: 100%;
            position: absolute;
            top: 70px;
            right: 100px;
        }

        #userDiv h2 {
            padding: 10px 0 10px 22px;
            transition: all .1s ease-in-out;
            display: block;
            cursor: pointer;
            font-weight: bold;
            font-size: 14px;
            border-top: 1px solid #b5cfd9;
        }

        #userDiv h2.on {
            color: #09c;
        }

        #userDiv .border-bottom {
            border-bottom: 1px solid #b5cfd9;
        }

        #userDiv h2 span {
            margin-right: 10px;
        }

        #userDiv h2:hover {
            color: #09c;
        }

        #userDiv ul {
            display: none;
            border-top: 1px solid #b5cfd9;
            padding: 5px 0;
            opacity: 1;
        }

        #userDiv ul li {
            list-style-type: none;
        }

        #userDiv ul li a {
            display: block;
            padding-left: 30px;
            line-height: 30px;
        }

        #userDiv ul li span {
            margin-right: 8px;
        }

        #userDiv ul li a:hover, .leftnav ul li a.on {
            color: #09c;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            // $("#file").bind('change', function () {
            //
            //     var size = $("#file")[0].files[0].size;
            //     $("#size").text("文件大小" + (size/1024/1024).toFixed(2)+"MB");
            //
            //
            //     console.log(path);
            //     var val = $("#file").val();
            //     alert(val);
            //     console.log(val);
            // });

            $("#userDiv h2").click(function () {
                $(this).next().slideToggle(200);
                $(this).toggleClass("on");
            });
            $("#userDiv ul li a").click(function () {
                $("#a_leader_txt").text($(this).text());
                $("#userDiv ul li a").removeClass("on");
                $(this).addClass("on");
            });
        });

    </script>
</head>
<body>
<div id="userDiv">
    <div class="leftnav-title"><strong><span class="icon-list"></span>用户列表</strong></div>
    <c:forEach items="${roles}" var="roles">
        <c:forEach items="${map}" var="map">
            <c:if test="${roles.roleId==map.key.roleId}">
            <h2><span class="icon-user"></span>${map.key.name}</h2>
            <ul>
            <c:forEach items="${map.value}" var="employee">
                <li><a>${employee.name}</a></li>
            </c:forEach>
            </c:if>
        </c:forEach>
        </ul>
    </c:forEach>
</div>
<div class="panel admin-panel">
    <div class="panel-head" id="add"><strong><span class="icon-pencil-square-o"></span>增加内容</strong></div>
    <div class="body-content">
        <form method="post" class="form-x" action="<%=basePath%>email?method=addEmail" enctype="multipart/form-data">
            <div class="form-group">
                <input type="hidden" value="${loginUser.userId}" name="addresser_id">
                <div class="label">
                    <label>收件人：</label>
                </div>
                <div class="field">
                    <input type="text" class="input" name="addressee_id">
                    <div class="tips"></div>
                </div>
            </div>

            <div class="form-group">
                <div class="label">
                    <label>主题：</label>
                </div>
                <div class="field">
                    <input type="text" class="input" name="theme">
                    <div class="tips"></div>
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>附件：</label>
                </div>
                <div class="field">
                    <input type="file" class="input tips" id="file"
                           style="float:left;width:20%;" name="file">
                    <div class="tipss"><span id="size">文件大小：</span></div>
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>正文：</label>
                </div>
                <div class="field">
                    <textarea name="content" class="input" style="height:650px; border:1px solid #ddd;"></textarea>
                    <div class="tips"></div>
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label></label>
                </div>
                <div class="field">
                    <button class="button bg-main icon-check-square-o" type="submit">提交</button>
                    <button class="button bg-main icon-check-square-o" type="submit">存草稿</button>
                </div>

            </div>
        </form>
    </div>
</div>

</body>
</html>